<template>
	<div id="">
		<p v-if="$store.state.user.userInfo.name">
			<label>
				<input type="file" ref="myfile" name="file" @change="fileChange()" />
				<img :src="user.avatar" width="100" class="avatar" />
			</label>

			{{userInfo.name}},积分{{userInfo.score}} <a href=""
				@click.prevent="$store.dispatch('logout')">退出</a>
		</p>
		<p v-else>
			<router-link to="/login?redirect=/user">登录</router-link> |
			<router-link to="/reg">注册</router-link>
		</p>
		<h1>用户中心</h1>
		<button @click="$toast.show('我可怜的没有人爱')">可爱</button> |
		<button @click="$toast.show('终于挂电话可以自己打游戏了')">晚安拜拜</button> |
		<button @click="$toast.show('开始刷剧',5000)">早点睡</button>
	</div>
</template>
<style>
	label input {
		display: none;
	}

	.avatar {
		width: 100px;
		height: 100px;
		background-color: #ccc;
		border-radius: 50%;
		overflow: hidden;
		/* 自适应图片 */
		object-fit: cover;
	}
</style>
<script>
	import axios from 'axios';
	// 映射状态
	import {mapState} from 'vuex'
	export default {
		computed:{
			// 把vuex中的user模块的userInfo映射为当前组件的计算出的一个属性
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		data() {
			return {
				user: {}
			}
		},
		created() {
			this.user = JSON.parse(localStorage.getItem("user") || "{}");
		},
		methods: {

			// 更新用户信息
			updateUser(url) {
				var user = JSON.parse(localStorage.getItem("user") || "{}");
				if (user.name) {
					// axios.put(url,data,config)
					// url请求地址，data请求的参数，config请求配置 通过 config={ headers:{请求头}}
					axios.put("http://dida100.com:8888/api/user", {
							...user,
							avatar: url
						}, {
							headers: {
								"Authorization": "Bearer " + localStorage.getItem("token")
							}
						})
						.then(res => {
							if (res.data.code === 0) {
								alert(res.data.msg || "修改成功")
								// 更新本地user的avatar
								user.avatar = url;
								// 再一次的存储，直接刷新可以获取最新的
								localStorage.setItem("user", JSON.stringify(user));
							} else {
								alert(res.data.msg || "修改失败")
							}
						})
						.catch(err => {
							console.log("网络错误:修改失败", err)
						})
				} else {
					alert("请先登录")
				}

			},
			// 上传图像
			upload(file) {
				// 创建一个表单对象
				var form = new FormData();
				// 追加文件
				form.append("file", file);
				// axios上传
				axios.post("http://dida100.com:8888/api/file/upload", form, {
						// 请求头携带token
						headers: {
							"Authorization": "Bearer " + localStorage.getItem("token")
						}
					})
					.then(res => {
						console.log(res.data);
						// 上传成功修改用户信息
						if (res.data.code === 0) {
							this.updateUser('http://dida100.com:8888' + res.data.file.path);
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			fileChange() {
				var file = this.$refs.myfile.files[0];
				console.log(file);
				// 把文件转换为图片
				var img = window.URL.createObjectURL(file);
				// 更新avatar
				this.user.avatar = img;
				// 执行上传图片
				this.upload(file);
			},
			// logout() {
			// 	// 把本地存储删除，清空user
			// 	localStorage.removeItem("user");
			// 	localStorage.removeItem("token");
			// 	this.user = {};
			// }
		}
	}
</script>

<style>
</style>
